<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用JSX语法1</title>
    <!-- 1.引入react核心库 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <!-- 2.引入react-dom 用于支持react操作dom -->
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <!-- 3.用于将jsx转换成浏览器可识别的代码 -->
    <script src="./node_modules/@babel/standalone/babel.min.js"></script>
</head>

<body>
    <div id="root">
        <!-- <input type="text" placeholder="请输入内容-真实dom"> -->
    </div>
</body>
<!-- 使用jsx语法 <script type="text/babel"></script> -->
<script type="text/babel">
    /*
      * jsx语法规则
      * 1.定义虚拟DOM时,不要写引号。
      * 2.标签中混入JS表达式时要用{}
      * 3. 样式的类名指定不要用class,要用className
      * 4. 只允许有一个根节点（3种解决办法[用一个div标签包裹/<></>/React.Fragment标签]）
      *   4.1 3种解决办法的区别：前一种会生成多余的标签结构，后两种不会在浏览器中生成多余标签
      *   4.2 推荐用<></>
      * 5. 内联样式,要用style={{key:value}}的形式去写。
      * 6. 标签必须闭合
      * 7. 标签首字母
      *   7.1  (1),若小写字母开头,则将该标签转为htm中同名元素,若htm中无该标签对应的同名元素,则报错；
    */

    let count = 100
    let item = <React.Fragment>
        <div className='item'>
            <h2 className='title'>中奖列表</h2>
            <p>总数：{count}</p>
            <input type="text" placeholder="请输入内容" />
            {
                // 不被浏览器识别的标签首字母小写-报错
                // <myTable>MyTable</myTable>
            }
            {
                // 不被浏览器识别首字母大写-报错
                // <MyTable>MyTable</MyTable>
            }
            <ul className='list'>
                <li>1. 张三</li>
                <li style={{ color: 'red', fontSize: 20 }}>2. 张三</li>
                <li>3. 张三</li>
            </ul>
        </div>
        <h2>下期活动请等待...</h2>
    </React.Fragment>

    // 4. 创建根节点
    let root = ReactDOM.createRoot(document.getElementById('root'))
    // 5. 把虚拟dom渲染到页面中
    root.render(item)
</script>

</html>